CSS Container Query Intersection: Mastering Multiple Container Query Combinations

Container queries are revolutionizing responsive web design, allowing elements to adapt based on the size of their container rather than the viewport. While single container queries are powerful, the real magic happens when you combine multiple queries to create intricate and nuanced responsive behaviors. This post dives deep into the concept of container query intersection, providing practical examples and best practices for crafting truly adaptive web layouts.

Understanding the Power of Container Queries

Before we delve into intersections, let's recap the fundamental principles of container queries.

Traditional media queries rely on viewport dimensions (e.g., screen width). This approach can be limiting because a component might need to adapt differently depending on its placement within the page. For example, a card component might have a different layout in a sidebar (narrow container) compared to the main content area (wider container).

Container queries solve this by allowing a component to query the dimensions of its parent container. This enables fine-grained control over component styling based on its context.

Basic Container Query Syntax

The basic syntax involves defining a container and then using the @container rule to apply styles based on its size. Here's a simple example:

            .container {
  container: my-container / inline-size;
}

@container my-container (min-width: 600px) {
  .element {
    color: blue;
  }
}
            

              
                Copy
              
            
          

In this example:

• .container is the containing element.
• container: my-container / inline-size; establishes this element as a container named "my-container" that tracks its `inline-size` (width in a horizontal writing mode). You can also use `block-size` (height). Using just `container: my-container` will enable size queries only after containment is explicitly applied, such as with layout, style, or state containment, which are beyond the scope of basic size queries.
• @container my-container (min-width: 600px) applies styles to .element only when the container's width is at least 600 pixels.

What is Container Query Intersection?

Container query intersection involves combining multiple container queries to target specific conditions. Think of it as using "AND" logic. Styles are only applied when all specified conditions are met. This allows for more precise and contextual styling than a single container query can provide.

Consider a scenario where you want a card component to display a certain way only when:

1. The container's width is at least 400px.
2. The container's height is at least 300px.

You can achieve this using container query intersection.

Implementing Container Query Intersection

There are several ways to implement container query intersection in CSS.

1. Using Multiple `@container` Rules (Nesting)

The most straightforward approach is to nest `@container` rules. This effectively creates an "AND" condition. The inner query will only be applied if the outer query's condition is met.

            .container {
  container: card-container / inline-size block-size;
}

@container card-container (min-width: 400px) {
  @container card-container (min-height: 300px) {
    .card {
      background-color: lightgreen;
      padding: 1em;
    }
  }
}
            

              
                Copy
              
            
          

In this example, the .card will only have a light green background and padding if the container's width is at least 400px and its height is at least 300px.

Pros:

• Easy to understand and implement.
• Good for simple intersections.

Cons:

• Can become verbose and difficult to manage with many conditions.
• Readability suffers with deep nesting.

2. Using CSS Custom Properties (Variables)

This approach leverages CSS custom properties (variables) to store boolean values based on container query conditions. You can then use these variables to conditionally apply styles.

            .container {
  container: card-container / inline-size block-size;
  --is-wide: 0;
  --is-tall: 0;
}

@container card-container (min-width: 400px) {
  .container {
    --is-wide: 1;
  }
}

@container card-container (min-height: 300px) {
  .container {
    --is-tall: 1;
  }
}

.card {
  background-color: white; /* Default background */
  padding: 0.5em; /* Default padding */
}

.card:has(~ .container[style*="--is-wide: 1"][style*="--is-tall: 1"]) {
  background-color: lightgreen;
  padding: 1em;
}
            

              
                Copy
              
            
          

Here's how it works:

1. We initialize two custom properties, --is-wide and --is-tall, to 0 on the container.
2. The first container query sets --is-wide to 1 if the container's width is at least 400px.
3. The second container query sets --is-tall to 1 if the container's height is at least 300px.
4. Finally, we use the `:has()` pseudo-class selector and attribute selectors to check if both --is-wide and --is-tall are equal to 1. If they are, we apply the desired styles to the card. This assumes the `.container` and `.card` are siblings, where `.card` comes before `.container`. Adjust the selector accordingly to your HTML structure. This selector might need adjustments for browser compatibility depending on the specific implementation and browser support for `:has()`. Consider using a fallback or a polyfill if needed.

Pros:

• More concise than nested `@container` rules, especially with many conditions.
• Improved readability.

Cons:

• Requires more advanced CSS knowledge (custom properties and attribute selectors).
• Can be slightly less performant than direct `@container` rules due to the calculation and application of custom properties.
• Relies on the `:has()` pseudo-class, which may have limited browser support in some older browsers.

3. Using JavaScript (Fallback/Enhancement)

While the goal is to achieve responsive behavior with CSS alone, JavaScript can be used as a fallback for older browsers or to enhance container query functionality beyond what's currently possible with CSS alone. This approach typically involves:

1. Detecting container query support.
2. Measuring the container's dimensions using JavaScript.
3. Adding or removing CSS classes based on the container's size.

This method is generally more complex and should be used sparingly, but it can be helpful for:

• Supporting older browsers that don't fully support container queries.
• Implementing complex logic that's difficult or impossible to express in CSS.
• Dynamically adjusting styles based on container content changes.

Example (Conceptual - requires complete implementation):

            // Check for container query support (simplified)
const supportsContainerQueries = CSS.supports('container-type', 'inline-size');

if (!supportsContainerQueries) {
  // Fallback using JavaScript
  const container = document.querySelector('.container');
  const card = document.querySelector('.card');

  function updateCardStyle() {
    const width = container.offsetWidth;
    const height = container.offsetHeight;

    if (width >= 400 && height >= 300) {
      card.classList.add('card--large');
    } else {
      card.classList.remove('card--large');
    }
  }

  // Initial update
  updateCardStyle();

  // Update on resize (consider debouncing for performance)
  window.addEventListener('resize', updateCardStyle);
}
            

              
                Copy
              
            
          

Pros:

• Provides a fallback for older browsers.
• Allows for more complex logic and dynamic adjustments.

Cons:

• Adds JavaScript dependency.
• More complex to implement and maintain.
• Can impact performance if not implemented carefully.

Practical Examples of Container Query Intersection

Let's explore some practical examples of how container query intersection can be used in real-world scenarios.

1. Responsive Navigation Menu

Imagine a navigation menu that adapts based on the available space in its container. When the container is wide enough, the menu items are displayed horizontally. When the container is narrow, the menu items collapse into a hamburger menu.

You can use container query intersection to trigger the hamburger menu only when the container's width is below a certain threshold and the viewport is also below a certain width (e.g., for mobile devices).

            /* CSS (Conceptual) */
.nav-container {
  container: nav-container / inline-size;
}

@container nav-container (max-width: 600px) {
  @media (max-width: 768px) { /* Viewport width check */
    .nav-menu {
      display: none; /* Hide regular menu */
    }

    .hamburger-menu {
      display: block; /* Show hamburger menu */
    }
  }
}

            

              
                Copy
              
            
          

This example combines a container query with a traditional media query to create a more nuanced responsive behavior. The media query checks the viewport width, ensuring that the hamburger menu is only shown on smaller screens. The container query checks the width of the `nav-container`, allowing the navigation to adapt even on larger screens if the container is constrained (e.g., within a sidebar).

2. Adapting Card Layouts

Card layouts are common in web design. You can use container query intersection to adjust the layout of a card based on the available space. For example, you might want to:

• Display the card title and image side-by-side when the container is wide enough.
• Stack the title and image vertically when the container is narrow.
• Show a full description only when the container is both wide enough and tall enough.

            /* CSS (Conceptual) */
.card-container {
  container: card-container / inline-size block-size;
}

@container card-container (min-width: 500px) {
  .card {
    display: flex; /* Side-by-side layout */
  }
}

@container card-container (min-width: 700px) {
  @container card-container (min-height: 400px) {
    .card-description {
      display: block; /* Show full description */
    }
  }
}

            

              
                Copy
              
            
          

This allows the card to adapt fluidly to different container sizes, providing a better user experience regardless of where the card is placed on the page.

3. Responsive Table Columns

Tables can be challenging to make responsive. Container queries, especially with intersection, can help you dynamically hide or reorder columns based on the available space. For example, in a data-heavy table, certain less-critical columns might only be visible when the container is wide enough.

            /* CSS (Conceptual) */
.table-container {
  container: table-container / inline-size;
  overflow-x: auto; /* Enable horizontal scrolling if needed */
}

@container table-container (min-width: 800px) {
  .table-column--details {
    display: table-cell; /* Show details column */
  }
}

@container table-container (min-width: 1000px) {
    .table-column--actions {
        display: table-cell; /* Show actions column if there is additional room */
    }
}

            

              
                Copy
              
            
          

The overflow-x: auto; property is crucial for ensuring that the table can be scrolled horizontally when it exceeds the container's width. This prevents content from being cut off. The specific column classes (`.table-column--details`, `.table-column--actions`) would need to be applied to the appropriate table cells (<td> elements) within the HTML.

Best Practices for Container Query Intersection

Here are some best practices to keep in mind when working with container query intersection:

1. Keep it simple: Avoid overly complex intersections. The more conditions you add, the harder it becomes to reason about the behavior of your components.
2. Prioritize readability: Choose the implementation method that's most readable and maintainable for your team. For example, if using CSS custom properties improves readability, even with the increased complexity, it might be the right choice.
3. Test thoroughly: Test your components in a variety of container sizes to ensure they behave as expected. Use browser developer tools to simulate different container dimensions.
4. Consider performance: Be mindful of performance implications, especially when using JavaScript fallbacks or complex CSS selectors. Profile your code to identify potential bottlenecks.
5. Use semantic HTML: Proper HTML structure is crucial for accessibility and maintainability. Ensure your HTML is well-formed and uses appropriate semantic elements.
6. Document your code: Clearly document your container query logic to make it easier for other developers (and your future self) to understand and maintain.
7. Provide Fallbacks: For older browsers that don't support container queries, offer graceful degradation using media queries or JavaScript.
8. Leverage browser developer tools: Modern browser developer tools have excellent support for inspecting and debugging container queries. Use these tools to visualize how your components are adapting to different container sizes.

The Future of Responsive Design

Container queries, and especially the techniques for combining them, represent a significant step forward in responsive web design. They enable developers to create more flexible, adaptable, and maintainable components. As browser support continues to improve, container queries will become an increasingly essential tool in the front-end developer's toolkit.

By mastering container query intersection, you can unlock the full potential of container queries and build truly responsive web experiences that adapt seamlessly to any context. Explore the different implementation methods, experiment with practical examples, and embrace the power of container-based responsiveness!

Accessibility Considerations

When implementing container queries, remember to consider accessibility. Ensure that your responsive design choices don't negatively impact users with disabilities.

• Text Sizing: Ensure that text remains readable at all container sizes. Avoid using fixed font sizes. Consider using relative units like em or rem.
• Color Contrast: Maintain sufficient color contrast between text and background at all container sizes.
• Keyboard Navigation: Ensure that all interactive elements remain accessible via keyboard navigation. The tab order should remain logical and consistent across different container sizes.
• Focus Indicators: Provide clear and visible focus indicators for interactive elements.
• Screen Reader Compatibility: Test your responsive design with screen readers to ensure that content is presented in a logical and understandable way.

Conclusion

CSS Container Query Intersection is a powerful technique that unlocks advanced responsive design capabilities. By combining multiple container queries, you can create highly adaptable components that respond intelligently to their environment. While there are several implementation approaches, the key is to choose the method that best suits your project's needs and prioritize readability, maintainability, and accessibility. As container query support grows, mastering these techniques will be essential for building modern, responsive web experiences.